<template>
    <div class="content">
        <div v-for="(item, key1) in allParams" :key="key1">
            <ul class="paramsUl">
                <li class="liTitle">{{item.item_name}}</li>
                <li class="item" v-for="(key, key2) in item.child" :key="key2">
                    <div class="itemKey">{{key.item_name}}</div>
                    <div class="itemValue">
                        <el-input v-if="typeof key.param=== 'string'" v-model="key.param" />
                        <div v-else>
                            <div class="categoryBox" v-for="(value, key3) in key.param" :key="key3">
                                <div class="category">
                                    <span>{{value.name}}</span>
                                    <el-input v-if="value.price" style="width:auto;" v-model="value.price" />
                                </div>
                                <div class="categorySelect">
                                    <el-button
                                        :class="['type',value.value==1?'active':'']"
                                        @click="value.value=1"
                                    >标配</el-button>
                                    <el-button
                                        :class="['type',value.value==2?'active':'']"
                                        @click="value.value=2"
                                    >选配</el-button>
                                    <el-button
                                        :class="['type',value.value==0?'active':'']"
                                        @click="value.value=0"
                                    >无</el-button>
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
        <div class="subBox">
            <el-button type="primary" @click="submitToServe">提交</el-button>
        </div>
    </div>
</template>
<script>
import { brandModel } from '../api';
export default {
    data() {
        return {
            allParams: '',
			allParamsOld:'',
        }
    },
    beforeRouteEnter(to, from, next) {
        // 以缓存形式存储brand_id 以防F5刷新路由参数：brand_id丢失
        if(from.params.brand_id) {
            localStorage.setItem('brand_id', from.params.brand_id);
        } else {
            to.params.brand_id = localStorage.getItem('brand_id')
        }
        next(vm => {});
    },
    beforeRouteLeave(to, from, next) {
        // 清除缓存
        localStorage.removeItem('brand_id');
        next();
    },
    created() {
        this.$parent.tabLists = [
            { label: "厂商品牌", name: "ytcarsBrandModel" },
            { label: "车型车款", name: "ytcarsBrandStyle"},
            { label: "车型参数", name: "ytcarsParaConfig" }
        ]
        let type_id = this.$route.params.type_id;
        type_id && this.getParam(type_id);
    },
    methods: {
        async getParam(id) {
            var reg = /\[/g
            let res = await brandModel.getParam({ type_id: id });
            // console.log(res)
            if (res.code === 1) {
                res.data.forEach(ele => {
                    ele.child.map(item => {
                        reg.lastIndex = 0;
                        if (item.param && reg.test(item.param)) {
                            item.param = JSON.parse(item.param)
                        }
                    })
                });
                this.allParams = res.data;
                this.allParamsOld = JSON.parse(JSON.stringify(res.data));
            }
        },
        async submitToServe() {
            let data = this.compiler(this.allParams,this.allParamsOld);
			if(data.length===0){
				this.$message.success('更新成功!')
				return
			}
            let res = await brandModel.updateParam({ str: data })
			if(res.code===1){
				this.$message.success(res.msg)
			}else{
				this.$message.error(res.msg)
			}
        },
		compiler(val, oldVal){
			let data = []
			val.forEach((item,index)=>{
				item.child&&item.child.forEach((j,jIndex)=>{
					let oldItem = oldVal[index].child[jIndex];
					let oldParam,jParam;
					if(typeof j.param === 'object'){
						oldParam = JSON.stringify(oldItem.param)
						jParam = JSON.stringify(j.param)
					}else{
						oldParam = oldItem.param
						jParam = j.param
					}
					if(j.id===oldItem.id&&oldParam!==jParam){
						data.push({id:j.id,param:jParam})
					}
				})
			})
			return data;
		}
    }
}
</script>
<style scoped lang="scss">
.content {
    height: calc(100% - 100px);
    overflow: auto;
}
.paramsUl {
    margin-top: 20px;
    border: 1px solid #E4E9F1;
    .liTitle {
        background: #F5F7FA;
        line-height: 42px;
        font-size: 14px;
        padding-left: 10px;
        border-bottom: 1px solid #E4E9F1;
        font-weight: bold;
        color:#1E8EFF;
    }
    .item {
        font-size:12px;
        line-height: 40px;
        padding-left: 20px;
        display: flex;

        border-bottom: 1px solid #E4E9F1;
        &:last-child{ border: 0; }
        .itemKey {
            width: 260px;
            border-right: 1px solid #E4E9F1;
        }
        .itemValue {
            padding-left: 10px;

            .categoryBox {
                display: flex;
                .category {
                    width: 300px;
                    height: 40px;
                    border-right: 1px solid #E4E9F1;
					span{
						margin-right: 10px;
					}
                }
                .categorySelect {
                    // display: flex;
                    padding-left: 10px;
                    line-height: 38px;
                    .active {
                        background: #409eff;
                        color: #fff;
                    }
                }
            }
        }
    }
}
.subBox {
    line-height: 4;
    text-align: center;
    position: absolute;
    bottom: 0;
    left: 0;
    height: 60px;
    width: 100%;
}
</style>